<template>
    <div class="LoanShortNote">
        <cardComponent pageTitle="短信放款通知">
            <template slot="cardBody">
                <div class="formContainer">
                    <!-- 搜索表单模块 -->
                    <el-form
                        class="searchForm"
                        ref="searchForms"
                        :model="searchForm"
                        :inline="true"
                        label-position="right"
                        size="small"
                        :rules="formRules"
                        label-width="110px"
                    >
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="文件名:" label-position="left" prop="filename">
                                    <el-input
                                        placeholder="文件名"
                                        v-model="searchForm.filename"
                                        type="text"
                                        name="filename"
                                    ></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label-position="left" prop="cardno" label="卡号:">
                                    <el-input
                                        placeholder="卡号"
                                        v-model="searchForm.cardno"
                                        type="text"
                                        name="cardno"
                                    ></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item prop="phone" label="持卡人手机号:">
                                    <el-input
                                        placeholder="持卡人手机号"
                                        v-model="searchForm.phone"
                                        name="phone"
                                    ></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label-position="left" prop="appday" label="日期:">
                                    <el-date-picker
                                        v-model="searchForm.appday"
                                        type="date"
                                        placeholder="请选择日期"
                                        format="yyyy-MM-dd"
                                        value-format="yyyyMMdd"
                                    ></el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label-position="left" prop="prodid" label="分期类型:">
                                    <el-select
                                        placeholder="分期类型"
                                        clearable
                                        v-model="searchForm.prodid"
                                    >
                                        <el-option
                                            v-for="(item, index) in periodicTypeList"
                                            :key="index"
                                            :label="item.label"
                                            :value="item.value"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item prop="sendflag" label="短信是否发送:">
                                    <el-select
                                        placeholder="请选择"
                                        clearable
                                        v-model="searchForm.sendflag"
                                    >
                                        <el-option
                                            v-for="(item, index) in sendTypeList"
                                            :key="index"
                                            :label="item.label"
                                            :value="item.value"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row class="buttonBox">
                            <el-button
                                type="primary"
                                size="small"
                                :loading="searchLoading"
                                @click="handleSearch"
                            >查 询</el-button>
                            <el-button
                                type="primary"
                                size="small"
                                @click="handleReset"
                                :loading="resetLoading"
                            >重 置</el-button>
                        </el-row>
                    </el-form>

                    <!-- 表格数据展示模块 -->
                    <el-table :data="tableData" border stripe class="heard-bg business_table">
                        <el-table-column
                            v-for="(item, index) in tableColumn"
                            :key="index"
                            :label="item.label"
                        >
                            <template slot-scope="scope">
                                <span
                                    v-if="item.value === 'prodid'"
                                >{{ scope.row.prodid | getTextValue }}</span>
                                <span
                                    v-else-if="item.value === 'appday'"
                                >{{ scope.row.appday | getFormatDate }}</span>
                                <span
                                    v-else-if="item.value === 'sendflag'"
                                >{{ scope.row.sendflag === '0' ? '否' : '是' }}</span>
                                <span v-else-if="item.value === 'operate'">
                                    <el-button
                                        type="text"
                                        @click="handleSendMessage(scope.row)"
                                    >发送短信</el-button>
                                </span>
                                <span v-else>{{scope.row[item.value]}}</span>
                            </template>
                        </el-table-column>
                    </el-table>

                    <Pagination
                        :hanleChangeCurrentPage="hanleChangeCurrentPage"
                        :handleChangeSize="handleChangeSize"
                        :total="total"
                        :pageSize="pageSize"
                        :currentPage="currentPage"
                    />
                </div>
            </template>
        </cardComponent>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import moment from 'moment';
import cardComponent from '@/components/cardComponent/cardComponent.vue';
import Pagination from '@/components/Pagination/Pagination.vue';
import { RegConfig } from '@/utils/RegConfig';
import { getTokenHsbankNo } from '@/utils/auth';

export default {
    name: 'LoanShortNote',
    components: {
        Pagination,
        cardComponent,
    },
    data() {
        return {
            currentPage: 1, // 当前分页
            pageSize: 10, // 每页数量
            total: 0, // 数据总数
            sendTypeList: [ // 短信是否发送选择列表
                { value: 1, label: '已发送' },
                { value: 0, label: '未发送' },
            ],
            periodicTypeList: [ // 分期类型选择列表
                { value: 'QCFQ', label: '汽车分期' },
                { value: 'CWFQ', label: '车位分期' },
            ],
            searchLoading: false, // 查询按钮loading
            resetLoading: false, // 重置按钮loading
            searchForm: { // 搜索表单字段
                filename: '', // 文件名
                cardno: '', // 卡号
                phone: '', // 持卡人手机号，
                appday: '', // 日期
                prodid: '', // 分期类型
                sendflag: '', // 短信是否发送
            },
            tableColumn: [
                {
                    label: '文件名',
                    value: 'filename',
                },
                {
                    label: '分期类型',
                    value: 'prodid',
                },
                {
                    label: '卡号',
                    value: 'cardno',
                },
                {
                    label: '申请日期',
                    value: 'appday',
                },
                {
                    label: '分期申请书编号',
                    value: 'applyNumber',
                },
                {
                    label: '手机号',
                    value: 'phone',
                },
                {
                    label: '短信是否发送',
                    value: 'sendflag',
                },
                {
                    label: '操作',
                    value: 'operate',
                },
            ],
            tableData: [], // 表格数据
            formRules: {
                cardno: [
                    { pattern: RegConfig.cardNo, message: '银行卡号应由13-21位数字组成', trigger: 'blur' },
                ],
                phone: [
                    { pattern: RegConfig.mobile, message: '请输入有效的手机号码', trigger: 'blur' },
                ],
            },
        };
    },

    filters: {
        // 分期类型 文字转译
        getTextValue(val) {
            let text = '';
            switch (val.trim()) {
                case 'QCFQ':
                    text = '汽车分期';
                    break;
                case 'CWFQ':
                    text = '车位分期';
                    break;
                default:
                    break;
            }
            return text;
        },

        // 日期格式化
        getFormatDate(val) {
            return moment(`${val}`).format('YYYY-MM-DD');
        },
    },

    created() { },

    mounted() {
        // 初始化查询
        this.handleSearch();
    },

    computed: mapState({
        cardInfo_3004: state => state.common.cardInfo_3004, // 默认卡信息
        defaultParams: state => state.common.defaultParams, // 接口默认参数
    }),

    methods: {
        // 点击查询获取列表
        handleSearch() {
            this.$refs.searchForms.validate((valid) => {
                if (valid) {
                    // const submitData = JSON.parse(JSON.stringify(this.searchForm))
                    const params = {
                        ...this.searchForm,
                        pageNum: this.currentPage,
                        pageSize: this.pageSize,
                    };
                    this.$post.carPeriodic.getLoanShortNoteData(params).then((res) => {
                        if (res.status === 200) {
                            const result = res.data.content;
                            this.tableData = result.page.records;
                            this.total = result.page.total;
                        }
                    });
                } else {

                }
            });
        },

        // 发送短信
        handleSendMessage(val) {
            console.log(val, '点击发送短信传入的值');
            const date = moment(val.appday.trim()).format(' YYYY 年 MM 月 DD 日'); // 申请日期
            const billamt = parseFloat(parseInt(val.billamt / 100)).toFixed(2); // 本金
            const fee = parseFloat(parseInt(val.totalfee) / 100).toFixed(2);
            const feepcnt = (fee / billamt * 100).toFixed(2); // 费率
            const prodid = val.prodid.trim() === 'QCFQ' ? '银保汽车分期' : '信用卡车位分期';
            const title = `尊敬的客户，您卡号为: ${val.cardno} 的信用卡于${date}申请 ${prodid} 成功，\n本金为 ${billamt} 元，费率为 ${feepcnt} %，分 ${parseInt(val.mths)} 期偿还。详询95379。`;
            this.$confirm(title, '提示', { customClass: 'warning', type: 'warning' }).then(() => {
                const defaultParams = JSON.parse(JSON.stringify(this.defaultParams));
                const { sysHead } = defaultParams;
                const { appHead } = defaultParams.body;
                const params = {
                    bankNum: getTokenHsbankNo('HsbankNo'), // 银行号
                    bnknbr: getTokenHsbankNo('HsbankNo'), // 银行号
                    busiName: sysHead.busiName, // 当前菜单名称
                    busiType: sysHead.busiType, // 业务类型
                    chnlNo: sysHead.chnlNo, // 渠道号
                    loginId: sysHead.loginID, // 登录用户id
                    sessionID: sysHead.sessionID,

                    brnNo: appHead.brnNo, // 网点代号
                    opeNo: appHead.opeNo, // 操作员号
                    source: appHead.source, // 交易来源
                    tempContent: title, // 短信内容
                    tempId: '', // 短信模板
                    tranCode: '6001', // 交易号
                    acctname1: this.cardInfo_3004.NAME, // 客户姓名
                    custid: this.cardInfo_3004.CUSTID, // 证件号
                    keytype: this.cardInfo_3004.KEYTYPE, // 证件类型
                    cardno: val.cardno, // 卡号
                    mobilephone: val.phone, // 手机号
                    id: val.id, // 当前操作记录id
                };

                this.$post.carPeriodic.senMessage(params).then((res) => {
                    console.log(res, '短信发送结果');
                    if (res.status === 200 && res.data.success) {
                        this.$alert('短信发送成功', '提示', {
                            customClass: 'success', type: 'success',
                        }).then(() => {
                            this.handleSearch();
                        });
                    } else {
                        this.$alert('短信发送失败', '提示', {
                            customClass: 'error', type: 'error',
                        });
                    }
                });
            }).catch(() => { });
        },

        // 点击重置搜索表单
        handleReset() {
            this.currentPage = 1;
            this.$refs.searchForms.resetFields();
            this.handleSearch();
        },

        // 切换分页大小
        handleChangeSize(val) {
            this.pageSize = val;
            // 重置页码
            this.currentPage = 1;
            this.handleSearch();
        },

        // 切换页码
        hanleChangeCurrentPage(val) {
            this.currentPage = val;
            this.handleSearch();
        },
    },
};
</script>
<style lang="scss">
.LoanShortNote {
    .searchForm {
        .el-select,
        .el-date-editor {
            width: 100%;
            /* max-width: 200px; */
        }
    }
}
</style>
<style rel="stylesheet/scss" lang="scss">
.LoanShortNote {
    .searchForm {
        .buttonBox {
            margin: 30px 0;
            float: left;
        }
    }
}
</style>
